<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>6.Bootstrap表单</title>

    <link rel="stylesheet" href="../css/bootstrap.css"/>

    <script src="../js/jquery-1.11.1.min.js"></script>
    <script src="../js/bootstrap.js"></script>

    <script>
        $(function(){
            $(":button").click(function(){
                $(".d").removeClass("has-error");
                $(".d").removeClass("has-success");
                $("span").removeClass("glyphicon glyphicon-remove form-control-feedback");
                $("span").removeClass("glyphicon glyphicon-ok form-control-feedback");
                if($(":text").val()==""){
                    //error
                    $(".d").addClass("has-error has-feedback");
                    $("span").addClass("glyphicon glyphicon-remove form-control-feedback");
                }else{
                    //success
                    $(".d").addClass("has-success has-feedback");
                    $("span").addClass("glyphicon glyphicon-ok form-control-feedback");
                }
            });
        });
    </script>

</head>
<body>
<div class="container">
    <form class="form-horizontal" role="form">
        <div class="d form-group">
            <label for="username" class="control-label">用户名称</label>
            <input type="text" id="username" class="form-control" placeholder="请输入用户名称">
            <span></span>
        </div>

        <div class="form-group">
            <input type="button" class="btn btn-info" value="点击"/>
        </div>
    </form>
</div>
</body>
</html>